<template>
  <div>
    <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入学生姓名/班级" @select="handleSelect">
      <i class="el-icon-search el-input__icon" slot="suffix" @select="handleSelect"></i>
    </el-autocomplete>
  </div>
</template>



<script>
  export default {
    data() {
      return {
        restaurants: [],
        state: '',
        timeout: null
      };
    },
    methods: {
      loadAll() {
        return [{
            "value": "迪丽热巴",
            "address": "三年四班"
          },
          {
            "value": "古力娜扎",
            "address": "四年一班"
          },
          {
            "value": "马尔扎哈",
            "address": "五年三班"
          },
          {
            "value": "张三",
            "address": "五年三班"
          },
          {
            "value": "李四",
            "address": "三年四班"
          },
        ];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1000 * Math.random());
        if (results.length == 0) {
          this.$message({
            message: '找不到 “ '+ queryString +' ” 相关信息，换一个试试吧',
            type: 'warning',
          });
        }
      },
      createStateFilter(queryString) {
        return (state) => {
          //改为===0 就是筛选的数据只是首字匹配的列表项，需要包含输入字的所有列表项改为！==-1
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  };
</script>

<style>

</style>
